<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var poly, map;
  var markers = [];
  var path = new google.maps.MVCArray;

  function initialize() {
    var fhkl = new google.maps.LatLng(49.26166182878903,7.360600846557645);

    map = new google.maps.Map(document.getElementById("map"), {
      zoom: 14,
      center: fhkl,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    });

    poly = new google.maps.Polygon({
      strokeWeight: 5,
	  strokeOpacity: 1,
	  fillOpacity: 0.55,
	  strokeColor:'#FFFFFF',
      fillColor: '#a3141d'
    });
	
    poly.setMap(map);
    poly.setPaths(new google.maps.MVCArray([path]));

    google.maps.event.addListener(map, 'click', addPoint);
  }

  function addPoint(event) {
    path.insertAt(path.length, event.latLng);

    var marker = new google.maps.Marker({
      position: event.latLng,
      map: map,
      draggable: true
    });
	
    markers.push(marker);
    marker.setTitle("#" + path.length);
	
	

    google.maps.event.addListener(marker, 'click', function() {
      marker.setMap(null);
      for (var i = 0, I = markers.length; i < I && markers[i] != marker; ++i);
      markers.splice(i, 1);
      path.removeAt(i);
      }

    );

    google.maps.event.addListener(marker, 'dragend', function() {
      for (var i = 0, I = markers.length; i < I && markers[i] != marker; ++i);
      path.setAt(i, marker.getPosition());
      }
    );
	
	
	
	
  }
  
  // Koordinaten des erstellen Rechtecks auslesen
  function extractPolygon(){
	
		for(var i = 0; i< path.getLength(); i++){
			alert(path.getAt(i));	
		}
	
		
	}
</script>
</head>
<body style="margin:0px; padding:0px;" onLoad="initialize()">
  
  <div id="map" style="width:100%; height:90%;"></div>
  
  <input name="" type="button" onClick="extractPolygon();">
  
</body>
</html>
